<template>
  <div class="questionnaire_det">
    <navigate>分问卷详情</navigate>
    <div class="qu_cont">
      <div class="qu_head dis_flex white_box">
        <img src="" alt="" class="qu_img" v-if="false" />
        <div>
          <div class="qu_tit">{{ info.paper_name }}</div>
          <div class="qu_desc qu_time">
            限时：{{ info.paper_time_limited }}分钟
          </div>
          <div class="qu_desc">
            计分：{{ info.paper_total_score }}分/{{ info.paper_topic_num }}题
          </div>
        </div>
      </div>
      <div class="head_label">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">查看历史记录</div>
      </div>
      <div class="task_box white_box">
        <div class="task_info dis_flex just_space_bet">
          <div class="task_txt">分卷所属任务：</div>
          <div class="task_desc">{{ info.paper_type_name }}</div>
        </div>
        <div class="task_info dis_flex just_space_bet">
          <div class="task_txt">任务截止时间：</div>
          <div class="task_desc">
            {{ convertTimestampToDateTime(info.time) }}
          </div>
        </div>
        <div class="task_info dis_flex just_space_bet">
          <div class="task_txt">允许报告查看：</div>
          <div class="task_desc">{{ authText(info.result_read_auth) }}</div>
        </div>
      </div>
      <div class="head_label">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">考试须知</div>
      </div>
      <div class="notice_box white_box">
        {{ info.paper_instructions }}
      </div>
      <div class="ev_btn" @click="toEvaluation()">开始测评</div>
    </div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time.js";
import { queryQnEvalDet } from "@/api/evaluation/questionnaire";
export default {
  data() {
    return {
      info: {},
    };
  },
  computed: {
    // 权限展示
    authText() {
      return (auth) => {
        if (!auth) {
          return ""; // 若 auth 为 undefined 或 null，返回空字符串
        }
        const temp = auth.split(",");
        if (temp.includes("3") && temp.includes("4")) return "本人和家长";
        if (temp.includes("3") && !temp.includes("4")) return "本人";
        if (temp.includes("4") && !temp.includes("3")) return "家长";
      };
    },
  },
  created() {
    this.getQnEvalDet();
  },
  methods: {
    convertTimestampToDateTime,
    async getQnEvalDet() {
      let res = await queryQnEvalDet({ id: this.$route.query.id });
      if (res.code === 200) {
        this.info = res.data;
      }
    },
    toEvaluation() {
      this.$router.push({
        path: `/questionnaireAnswer?id=${this.info.paper_id}&taskId=${this.info.id}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}
.just_space_bet {
  justify-content: space-between;
}
.white_box {
  background: #ffffff;
  border-radius: 6.67px;
}
.questionnaire_det {
  color: #333333;
  background-color: #f4f6fa;
}
.qu_cont {
  padding: 0 10px;
}
.qu_head {
  padding: 16.67px 10px;
  margin-top: 10px;
}
.qu_img {
  width: 80px;
  height: 80px;
  margin-right: 17.33px;
  background: red;
}
.qu_tit {
  font-size: 18px;
  line-height: 18px;
}
.qu_desc {
  font-size: 13.33px;
  line-height: 13.33px;
  color: #888888;
}
.qu_time {
  margin: 16.77px 0 11.33px;
}
.head_label {
  display: flex;
  align-items: center;
  margin: 19px 0;
}
.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}
.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}
.task_box {
  padding: 0 12px;
}
.task_info {
  padding: 16px 0;
  font-size: 14.67px;
  line-height: 14.67px;
  border-bottom: 0.33px solid #dddddd;
  &:last-child {
    border-bottom: 0;
  }
}
.task_txt {
  color: #666666;
}
.task_desc {
  color: #333333;
}
.notice_box {
  padding: 22.67px 13px;
  color: #555555;
  line-height: 30px;
  font-size: 14px;
}
.ev_btn {
  position: fixed;
  bottom: 55px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 340px;
  height: 46.67px;
  line-height: 46.67px;
  text-align: center;
  color: #ffffff;
  font-size: 15.33px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
}
</style>
